<script setup lang="ts">
import { onMounted, ref } from 'vue';
import FreeButton from './components/Button/Button.vue'
import FreeCollapse from './components/Collapse/Collapse.vue'
import FreeCollapseItem from './components/Collapse/CollapseItem.vue'
import FreeIcon from './components/Icon/Icon.vue'
import FreeAlert from './components/Alert/Alert.vue'
import FreeTooltip from './components/Tooltip/Tooltip.vue'

const openedValue = ref(['a'])
const size = ref<any>('3x')
const trigger = ref<any>('click')
onMounted(() => {
  setTimeout(() => {
    openedValue.value = ['a', 'b']
    size.value = '2xl'
  }, 2000)
})
</script>

<template>
    <FreeTooltip  placement="right" :trigger="trigger">
       hello
       <template #content>
        world
      </template>
    </FreeTooltip> 


  <div>
    <FreeButton type="primary">按钮</FreeButton>
    <FreeButton type="danger">按钮</FreeButton>
    <FreeButton type="warning">按钮</FreeButton>
    <FreeButton type="success">按钮</FreeButton>
    <FreeButton type="info">按钮</FreeButton>


    <br>
    <hr>

    <FreeButton type="primary" size="small">按钮</FreeButton>
    <FreeButton type="primary" >按钮</FreeButton>
    <FreeButton type="primary" size="large">按钮</FreeButton>

    <br>
    <hr>

    <FreeButton type="primary" plain>按钮</FreeButton>
    <FreeButton type="danger" circle>按</FreeButton>
    <FreeButton type="danger" round>按钮</FreeButton>
    <FreeButton type="danger" disabled>按钮</FreeButton>

    <FreeButton size="large" loading></FreeButton>

    <br>
    <hr>

    <FreeCollapse v-model="openedValue" accordion>
       <FreeCollapseItem name="a" title="Title A">
          <h1>headline title</h1>
          <div> this is content a aaa </div>
        </FreeCollapseItem>

        <FreeCollapseItem name="b" title="Title B">
          <div> this is bbbbb test </div>
        </FreeCollapseItem>

        <FreeCollapseItem name="c" title="Title C" disabled>
          <div> this is cccc test </div>
        </FreeCollapseItem>
    </FreeCollapse>

   
    <FreeIcon icon="arrow-up" :size="size" type="danger" color="#0e7a0d"/>

    <FreeAlert closable type="success" effect="light">
      <div>hello</div>
    </FreeAlert>

  
  </div>
</template>

<style scoped>

</style>
